<template>
  <div class="dayin">
    <div class="btn_dayin">
      <el-button type="primary" @click="print()" class="dayin_btn"
        >打印预览</el-button
      >
    </div>
    <div ref="print" id="printArea">
      <div v-for="(ite, indexs) in dayinlist" :key="indexs">
        <div class="title" style="margin-bottom: 20px">
          <div style="text-align: center; font-size: 26px; font-weight: bold">
            {{ Infomation }}任务单
          </div>
        </div>
        <div class="list_order" style="margin-bottom: 5px">
          <el-row style="width: 50%; display: flex; align-items: center">
            <el-col :span="7">客户: </el-col>
            <el-col :span="17">
              <input
                type="text"
                :value="ite.customer ? ite.customer.customer_name : ''"
                class="input_border"
              />
            </el-col>
          </el-row>
          <el-row style="width: 50%; display: flex; align-items: center">
            <el-col :span="7"> 日期: </el-col>
            <el-col :span="17">
              <input
                type="text"
                :value="formatterTime(ite.order_date)"
                class="input_border"
              />
              <!-- {{ formatterTime(dayinlist[0].order_date) }} -->
            </el-col>
          </el-row>
          <el-row style="width: 50%; display: flex; align-items: center">
            <el-col :span="7"> 交货日期: </el-col>
            <el-col :span="17">
              <input
                type="text"
                :value="formatterTime(ite.delivery_date)"
                class="input_border"
              />
              <!-- {{  formatterTime(dayinlist[0].delivery_date) }} -->
            </el-col>
          </el-row>
        </div>
        <table style="border-collapse: collapse" cellspacing="0">
          <tr>
            <td>产品</td>
            <td>型号</td>
            <td>规格</td>
            <td>尺寸</td>
          </tr>
          <template v-for="itel in ite.order_second" >
            <div :key="itel.id">
              <tr>
            <td>
              {{ itel.product ? itel.product.product_name : "" }}
            </td>
            <td>
              {{ itel.model_number ? itel.model_number.model_number : "" }}
            </td>
            <td>{{ itel.work_size }}</td>
            <td>
              {{ itel.specification ? itel.specification.specification : "" }}
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <table>
                 <tr>
                  <td>产品工序</td>
                  <td v-for="it  in  itel.job_type_list" :key="it.id">{{it.job_type?it.job_type.job_type:""}}</td>
                 </tr> 
                 <tr>
                  <td>工人</td>
                  <td v-for="it  in  itel.job_type_list" :key="it.id">{{it.job_type?it.job_type.job_type:""}}</td>
                 </tr> 
              </table>
            </td>
           
          </tr>
          <tr>
            <td>工人</td>
          </tr>
          <tr>
            <td>时间</td>
          </tr>
            </div>
          </template>
          

          <tr>
            <td>备注：{{ ite.remark }}</td>
          </tr>
        </table>

        <div style="page-break-after: always"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { setOrderPrintStatus, getOrderChildListByOrderId } from "@/api/product";
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      nums: 1,
      dayinlist: [],
      Infomation: "",
      imageUrl: "",
      num: 0,
      id_arr: [],
      order_second: [],
    };
  },
  created() {
    try {
      this.dayinlist = JSON.parse(this.$route.query.data);
    } catch (error) {
      console.error("Failed to parse JSON data:", error);
      return;
    }
  },
  mounted() {
    console.log(this.dayinlist);
    // this.push_data();
    this.Infomation = this.$store.getters.Infomation.company_name;
  },
  methods: {
    set_OrderPrintStatus() {
      setOrderPrintStatus({
        id_arr: this.id_arr,
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "打印成功",
          type: "success",
        });
        this.isprint = false;
      });
    },
    //获取对应子订单信息
    async getOrderChild(obj, is_epibolys) {
      try {
        const res = await getOrderChildListByOrderId({
          ...obj,
          is_epiboly: is_epibolys,
        });
        if (res.code === 200) {
          return res.data;
        } else {
          // 处理其他返回码的情况，例如日志记录或抛出错误
          console.error("Failed to get order child list:", res);
          return [];
        }
      } catch (error) {
        // 处理请求失败的情况
        console.error("Error fetching order child list:", error);
        return [];
      }
    },
    push_data() {
      this.dayinlist.forEach((item) => {
        item.order_child = this.removeDuplicates(item.order_child, [
          "job_type_id",
        ]);
        this.id_arr.push(item.id);
      });
      this.dayinlist.forEach((item) => {
        item.order_second.forEach((ite) => {
          if (ite.is_split == 1) {
            ite.order_second.forEach((ite2) => {
              const push_prders = {
                employee_user_id: "", // 员工
                job_type_id: "", // 工种
                order_id: ite2.order_id, // 订单id
                order_second_id: ite2.id,
              };
              this.getOrderChild(push_prders, 2)
                .then((res) => {
                  console.log(res);
                  let obj = {
                    product: items,
                    second: res,
                  };
                  order_second.push(obj);
                })
                .catch((error) => {
                  console.error("Error in getOrderChild:", error);
                });
            });
          } else {
            const push_prders = {
              employee_user_id: "", // 员工
              job_type_id: "", // 工种
              order_id: ite.order_id, // 订单id
              order_second_id: ite.id,
            };
            this.getOrderChild(push_prders, 2)
              .then((res) => {
                console.log(res);
                let obj = {
                  product: items,
                  second: res,
                };
                order_second.push(obj);
              })
              .catch((error) => {
                console.error("Error in getOrderChild:", error);
              });
          }
        });
      });

      const promises = this.dayinlist.forEach((item) => {
        let order_second = [];
        item.order_second.map((items) => {
          if (items.type_id != 3) {
            const push_prders = {
              employee_user_id: "", // 员工
              job_type_id: "", // 工种
              order_id: items.order_id, // 订单id
              order_second_id: items.id,
            };
            return this.getOrderChild(push_prders, 2)
              .then((res) => {
                console.log(res);
                let obj = {
                  product: items,
                  second: res,
                };
                order_second.push(obj);
              })
              .catch((error) => {
                console.error("Error in getOrderChild:", error);
              });
          }
        });
        this.order_second.push(order_second);
      });

      Promise.all(promises)
        .then(() => {
          console.log(this.order_second, "33333333333333");
        })
        .catch((error) => {
          console.error("Error in Promise.all:", error);
        });
    },
    removeDuplicates(array, keys) {
      return array.filter((item, index, self) => {
        let isUnique = true;
        for (let key of keys) {
          if (index !== self.findIndex((t) => t[key] === item[key])) {
            isUnique = false;
            break;
          }
        }
        return isUnique;
      });
    },
    formatterTime(data) {
      if (data) {
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
      } else {
        return "";
      }
    },
    print() {
      this.$print(this.$refs.print);
      this.set_OrderPrintStatus();
    },
  },
};
</script>
<style scoped>
.dayin_btn {
  width: 120px;
  display: block;
  margin: 20px;
}

.btn_dayin {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.btn_dayin div {
  display: flex;
  align-items: center;
}

.btn_dayin div .el-input-number {
  margin-left: 15px;
}

.dayin {
  box-sizing: border-box;
}

#printArea {
  width: 95%;
  height: 100%;
  margin: 0 auto;
  /* overflow: hidden; */
}

#printArea table {
  width: 100%;
}

.list_order {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

#printArea table tr td {
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  max-width: 150px;
}
.input_border {
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 35px;
}
@media print {
  .input_border {
    border: none;
    height: 35px;
  }
  .dayin {
    box-sizing: border-box;
  }

  #printArea {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    /* overflow: hidden; */
  }

  #printArea table {
    width: 100%;
  }

  #printArea table tr td {
    border: 1px solid #000;
    padding: 10px;
    box-sizing: border-box;
  }
}

@page {
  size: auto;
  /* auto is the initial value */
  margin: 3mm;
  /* this affects the margin in the printer settings */
}
</style>
